---
title: Dynamic Functions
description: Learn about dynamic functions in Unistyles 3.0
---

import { Aside } from '@astrojs/starlight/components'
import Seo from '../../../../components/Seo.astro'

<Seo
    seo={{
        title: 'Dynamic Functions',
        description: 'Learn about dynamic functions in Unistyles 3.0'
    }}
>

If you need to pass a value from JSX to your `stylesheet` you can do so using a concept called `dynamic function`.

### Usage

To use a dynamic function, change **any** stylesheet's value from an `object` to a `function`:

```diff lang="tsx" del="container: {" ins="container: () => ({"
const styles = StyleSheet.create(theme => ({
    container: {
    container: () => ({
        backgroundColor: theme.colors.background,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
-    }
+    })
}))
```

Now, you can pass **any** number of arguments, and all with TypeScript hints:

```tsx /maxWidth/ /isOdd/
export const Example = ({ maxWidth, isOdd, children }) => {
    return (
        <View style={styles.container(maxWidth, isOdd)}>
            {children}
        </View>
    )
}

const styles = StyleSheet.create(theme => ({
    container: (maxWidth: number, isOdd: boolean) => ({
        backgroundColor: theme.colors.background,
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        maxWidth,
        borderBottomWidth: isOdd ? 1 : undefined
    })
}))
```

<Aside type="caution" title="Serializable arguments">
Keep in mind that a dynamic function can accept only serializable arguments.
These arguments will be passed to C++, so anything that can be represented as `folly::dynamic` is supported (such as strings, numbers, booleans, arrays, objects, etc.).
</Aside>

</Seo>
